<template>
  <d2-container>
    <template slot="header">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="租户姓名">
          <el-input v-model="searchForm.tenantName" placeholder="请输入租户姓名"></el-input>
        </el-form-item>
        <el-form-item label="房间号">
          <el-input v-model="searchForm.roomNumber" placeholder="请输入房间号"></el-input>
        </el-form-item>
        <el-form-item label="充值时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
    
    <el-table
      :data="tableData"
      v-loading="loading"
      style="width: 100%">
      <el-table-column
        prop="tenantName"
        label="租户姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="roomNumber"
        label="房间号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="amount"
        label="充值金额"
        width="120">
        <template slot-scope="scope">
          ¥{{ scope.row.amount }}
        </template>
      </el-table-column>
      <el-table-column
        prop="rechargeTime"
        label="充值时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="paymentMethod"
        label="支付方式"
        width="100">
      </el-table-column>
      <el-table-column
        prop="operator"
        label="操作员"
        width="100">
      </el-table-column>
      <el-table-column
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDetail(scope.row)">详情</el-button>
          <el-button size="mini" type="primary" @click="handlePrint(scope.row)">打印</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <template slot="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total">
      </el-pagination>
    </template>
  </d2-container>
</template>

<script>
import { settlementList } from '@api/modules/finance'

export default {
  name: 'FinanceRecords',
  data () {
    return {
      loading: false,
      searchForm: {
        tenantName: '',
        roomNumber: '',
        dateRange: []
      },
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    async getList () {
      this.loading = true
      try {
        const params = {
          page: this.pagination.currentPage,
          limit: this.pagination.pageSize,
          tenantName: this.searchForm.tenantName,
          roomNumber: this.searchForm.roomNumber
        }
        
        if (this.searchForm.dateRange && this.searchForm.dateRange.length === 2) {
          params.startDate = this.searchForm.dateRange[0]
          params.endDate = this.searchForm.dateRange[1]
        }
        
        const response = await settlementList(params)
        this.tableData = response.list || []
        this.pagination.total = response.totalCount || 0
      } catch (error) {
        this.$message.error('获取数据失败')
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    handleSearch () {
      this.pagination.currentPage = 1
      this.getList()
    },
    handleReset () {
      this.searchForm = {
        tenantName: '',
        roomNumber: '',
        dateRange: []
      }
      this.pagination.currentPage = 1
      this.getList()
    },
    handleDetail (row) {
      this.$message.info(`查看充值记录详情: ${row.tenantName}`)
    },
    handlePrint (row) {
      this.$message.info(`打印充值凭证: ${row.tenantName}`)
    },
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.pagination.currentPage = val
      this.getList()
    }
  }
}
</script>

<style scoped>
.demo-form-inline .el-form-item {
  margin-bottom: 10px;
}
</style>

